<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }

    canvas {
        display: block;
        background: #222;
    }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var ballList = [];
    var w, h;

    init();

    function init() {
        w = window.innerWidth;
        h = window.innerHeight;
        canvas.width = w;
        canvas.height = h;
    }
    window.onresize = init;


    function Ball(x, y) {
        this.x = x;
        this.y = y;
        this.r = 50;
        this.globalCompositeOperation = 'lighter';
        this.color = getColor();
        this.vx = random(-3, 3);
        this.vy = random(-3, 3);
        this.vr = -0.8;
    }

    Ball.prototype = {
        draw: function() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
            ctx.fillStyle = this.color;
            ctx.fill();
        },
        update: function() {
            this.x += this.vx;
            this.y += this.vy;
            this.r += this.vr;
            if (this.r < 0) {
                this.r = 0;
            }
            this.draw();
        }

    }


    canvas.addEventListener('mousemove', function(e) {
        var posX = e.offsetX;
        var posY = e.offsetY;
        var ball = new Ball(posX, posY);
        ballList.push(ball);
    })
    render();

    function render() {
        ctx.clearRect(0, 0, w, h)
        requestAnimationFrame(render);
        for (var item of ballList) {
            item.update();

        }
        for (var i = 0; i < ballList.length; i++) {
            if (ballList[i].r <= 0) {
                ballList.splice(i, 1);
            }
        }
    }


    function random(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }

    function getColor() {
        return `rgb(${random(0,256)},${random(0,256)},${random(0,256)})`;
    }
    </script>
</body>

</html>